(function(){
	var datepicker = window.datepicker;
	var monthData;
	var wrapper;
	datepicker.buildUi = function(year,month){
		monthData = datepicker.getMonthData(year,month);
		console.log(monthData);
		var html = 
		'<div class="ui-datepick-head">'+
		'<a href="#" class="ui-datepick-btn ui-datepick-prev-btn">&lt;</a>'+	
		'<a href="#" class="ui-datepick-btn ui-datepick-next-btn">&gt;</a>'+	
		'<span class="ui-datepick-curr-month">'+monthData.year + '-' + monthData.month+'</span>'+
		'</div>'+
		'<div class="ui-datepick-body">'+
		'<table>'+
			'<thead>'+
				'<tr>'+
					'<th>一</th>'+
					'<th>二</th>'+
					'<th>三</th>'+
					'<th>四</th>'+
					'<th>五</th>'+
					'<th>六</th>'+
					'<th>七</th>'+
				'</tr>'+
			'</thead>'+
			'<tbody>';
			for(var i=0; i<monthData.date.length; i++){
				var date = monthData.date[i];
				if(i%7 === 0){
					html += '<tr>';
				}
				html += '<td data-date="'+ date.date+'">'+ date.showDate +'</td>';
				if(i%7 === 6){
					html+='</tr>';
				}
			}

			html += '</tbody>'+
		'</table>'+	
		'</div>';
		return html;
	}
	datepicker.render = function(direction){
		var year;
		var month;
		if(monthData){
			year = monthData.year;
			month = monthData.month;
		}
		if(direction === 'prev') {
				month-- ;
		}

		if(direction === 'next') month++ ;
		var html = datepicker.buildUi(year,month);
		if(!wrapper){
		wrapper = document.createElement('div');
		document.body.appendChild(wrapper);
		wrapper.className='ui-datepick-wrapper';
		}
		wrapper.innerHTML = html;
	}

	datepicker.init = function(input){
		datepicker.render();
		var $input = document.querySelector(input);
		var isOpen = false;
		$input.addEventListener('click',function(){
			if(isOpen){
				// wrapper.classList.remove('ui-datepick-wrapper-show');
				wrapper.className = " ui-datepick-wrapper";
				isOpen = false;
			}else{
				//wrapper.classList.add='ui-datepick-wrapper-show';
				var left = $input.offsetLeft;
				var top = $input.offsetTop;
				var height = $input.offsetHeight;
				wrapper.style.left = left + 'px';
				wrapper.style.top = top + height + 2 +'px';
				wrapper.className += " ui-datepick-wrapper-show";
				isOpen = true;
			}
		},false);

		wrapper.addEventListener('click',function(e){
			var target = e.target;
			if(!target.classList.contains('ui-datepick-btn')) 
				return;
			
			if(target.classList.contains('ui-datepick-prev-btn')){
				datepicker.render('prev');
			}else if(target.classList.contains('ui-datepick-next-btn')){
				datepicker.render('next');
			}
		},false);

		wrapper.addEventListener('click',function(e){
			var target = e.target;
			if(target.tagName.toLowerCase() != 'td') return;
			var day = target.getAttribute('data-date');

			var date = new Date(monthData.year,monthData.month,day);
			$input.value = format(date);
			wrapper.className = " ui-datepick-wrapper";
		},false);

	    function format(date){
	    	padding = function(num){
	    		if(num<9){
	    			return '0' + num;
	    		}
	    		return num;
	    	}
			var value = date.getFullYear() + '-' + padding(date.getMonth()) +'-'+ padding(date.getDate());
			return value;
	    }	
	}

})();